<template>
  <div class="child-content">
    <h2>子组件内容：</h2>
    <ul v-if="hackReset">
      <li v-for="item in messages" :key="item">
        父组件录入了信息：{{ item }}
      </li>
    </ul>

    <div>
      孩子2:
      <p> {{ msg2 }} </p>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
  import Bus from '@/components/Bus'
    export default {
        name: "child-component",
      data: function() {
        return {
          //数组对象
          messages: ['aaaa'],
          hackReset: true,
          msg2: '',
        }
      },
      created(){
        
      },
      mounted() {
        Bus.$on('getParams',function (msg) {
          console.log(msg)
          debugger
          console.log(this.messages)
          if(this.messages == undefined || this.messages == null || this.messages == '') {
            this.messages = [];
          }
          this.messages.push(msg)
          // Vue.set(this.messages, this.messages.length - 1, msg );
          // this.hackReset = false
          //   this.$nextTick(() => {
          //   this.hackReset = true
          // })
          // this.$root.forceUpdate('ul')

        });
        Bus.$on('txtFun', function(msg) {
          debugger
          this.msg2 = msg;
          console.log(this.msg2);
        });
      }
      // events: {
      //   'parent-msg': function(msg) {
      //     this.messages.push(msg)
      //   }
      // }
      ,
      watch: {
        msg2 : {
          handler(newValue,oldValue){
            debugger
            this.getChange();
          },
        }
      }
    }
</script>

<style scoped>

  .parent-content,
  .child-content {
    height: 150px;
    padding: 20px;
  }

  .parent-content {
    border: 1px solid #0090D3;
    margin-bottom: 20px;
  }

  .child-content {
    border: 1px solid #ff0066;
  }
</style>
